<include file="Public/header" title="{$category.seo_title}" keywords="{$category.seo_keywords}" description="{$category.seo_description}" />

<!-- main -->
<main class="content-wrapper page-portfolio-list">
	<section class="content-header">
		<div class="container">
			<div class="row">
				<div class="col-sm-12">
					<h1>作品展示</h1>
					<p>Find blogs you like.</p>
				</div>
			</div>
		</div>
	</section>

	<section class="content-body">
		<div class="container">
			<!-- isotope -->
			<ul class="isotope-filters portfolio-filters">
			    <li class="active"><a href="#" data-filter="*"><span>全部</span></a></li>
			    <li><a href="#" data-filter=".foo"><span>月球灯</span></a></li>
			    <li><a href="#" data-filter=".bar"><span>台灯</span></a></li>
			    <li><a href="#" data-filter=".baz"><span>U盘</span></a></li>
			</ul>
			<div class="row">
				<div class="portfolio-list">
                    <div class="col-sm-4 col-xs-12 portfolio-item foo">
						<a class="fancybox-por-item zoom-img" href="__TMPL__Public/assets/images/portfolio/p1.jpg" data-fancybox-group="fancybox-por-gallery" title="测试文本，测试文本">
							<img src="__TMPL__Public/assets/images/portfolio/p1.jpg" class="img-responsive" alt="" />
						</a>
                    </div>
                    <div class="col-sm-4 col-xs-12 portfolio-item bar">
						<a class="fancybox-por-item zoom-img" href="__TMPL__Public/assets/images/portfolio/p2.jpg" data-fancybox-group="fancybox-por-gallery" title="测试文本，测试文本">
							<img src="__TMPL__Public/assets/images/portfolio/p2.jpg" class="img-responsive" alt="" />
						</a>
                    </div>
                    <div class="col-sm-4 col-xs-12 portfolio-item foo">
						<a class="fancybox-por-item zoom-img" href="__TMPL__Public/assets/images/portfolio/p3.jpg" data-fancybox-group="fancybox-por-gallery" title="测试文本，测试文本">
							<img src="__TMPL__Public/assets/images/portfolio/p3.jpg" class="img-responsive" alt="" />
						</a>
                    </div>
                    <div class="col-sm-4 col-xs-12 portfolio-item foo">
						<a class="fancybox-por-item zoom-img" href="__TMPL__Public/assets/images/portfolio/p4.jpg" data-fancybox-group="fancybox-por-gallery" title="测试文本，测试文本">
							<img src="__TMPL__Public/assets/images/portfolio/p4.jpg" class="img-responsive" alt="" />
						</a>
                    </div>
                    <div class="col-sm-4 col-xs-12 portfolio-item baz">
						<a class="fancybox-por-item zoom-img" href="__TMPL__Public/assets/images/portfolio/p5.jpg" data-fancybox-group="fancybox-por-gallery" title="测试文本，测试文本">
							<img src="__TMPL__Public/assets/images/portfolio/p5.jpg" class="img-responsive" alt="" />
						</a>
                    </div>
                    <div class="col-sm-4 col-xs-12 portfolio-item foo">
						<a class="fancybox-por-item zoom-img" href="__TMPL__Public/assets/images/portfolio/p6.jpg" data-fancybox-group="fancybox-por-gallery" title="测试文本，测试文本">
							<img src="__TMPL__Public/assets/images/portfolio/p6.jpg" class="img-responsive" alt="" />
						</a>
                    </div>
                    <div class="col-sm-4 col-xs-12 portfolio-item bar">
						<a class="fancybox-por-item zoom-img" href="__TMPL__Public/assets/images/portfolio/p7.jpg" data-fancybox-group="fancybox-por-gallery" title="测试文本，测试文本">
							<img src="__TMPL__Public/assets/images/portfolio/p7.jpg" class="img-responsive" alt="" />
						</a>
                    </div>
                    <div class="col-sm-4 col-xs-12 portfolio-item bar">
						<a class="fancybox-por-item zoom-img" href="__TMPL__Public/assets/images/portfolio/p8.jpg" data-fancybox-group="fancybox-por-gallery" title="测试文本，测试文本">
							<img src="__TMPL__Public/assets/images/portfolio/p8.jpg" class="img-responsive" alt="" />
						</a>
                    </div>
                    <div class="col-sm-4 col-xs-12 portfolio-item baz">
						<a class="fancybox-por-item zoom-img" href="__TMPL__Public/assets/images/portfolio/p9.jpg" data-fancybox-group="fancybox-por-gallery" title="测试文本，测试文本">
							<img src="__TMPL__Public/assets/images/portfolio/p9.jpg" class="img-responsive" alt="" />
						</a>
                    </div>
                </div>
			</div>
			<!-- /isotope -->
		</div>
	</section>

	<section class="section alt portfolio">
		<div class="container">
			<h2 class="with-border-bottom">作品展示</h2>
			<div class="swiper-container section-item">
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<a class="fancybox-swp-por-item" href="__TMPL__Public/assets/images/portfolio/p1.jpg" data-fancybox-group="fancybox-swp-por-gallery" title="测试文本，测试文本">
							<img src="__TMPL__Public/assets/images/portfolio/p1.jpg" class="img-responsive" alt="" />
						</a>
					</div>
					<div class="swiper-slide">
						<a class="fancybox-swp-por-item" href="__TMPL__Public/assets/images/portfolio/p2.jpg" data-fancybox-group="fancybox-swp-por-gallery" title="测试文本，测试文本">
							<img src="__TMPL__Public/assets/images/portfolio/p2.jpg" class="img-responsive" alt="" />
						</a>
					</div>
					<div class="swiper-slide">
						<a class="fancybox-swp-por-item" href="__TMPL__Public/assets/images/portfolio/p3.jpg" data-fancybox-group="fancybox-swp-por-gallery" title="测试文本，测试文本">
							<img src="__TMPL__Public/assets/images/portfolio/p3.jpg" class="img-responsive" alt="" />
						</a>
					</div>
					<div class="swiper-slide">
						<a class="fancybox-swp-por-item" href="__TMPL__Public/assets/images/portfolio/p4.jpg" data-fancybox-group="fancybox-swp-por-gallery" title="测试文本，测试文本">
							<img src="__TMPL__Public/assets/images/portfolio/p4.jpg" class="img-responsive" alt="" />
						</a>
					</div>
				</div>
			</div>
		</div>
	</section>
</main>

<!-- isotope -->
<script src="__TMPL__Public/assets/plugins/isotope/jquery.isotope.min.js"></script>

<!-- swiper -->
<script src="__TMPL__Public/assets/plugins/swiper/swiper-3.2.7.jquery.min.js"></script>

<!-- fancyBox -->
<script type="text/javascript" src="__TMPL__Public/assets/plugins/fancyBox/source/jquery.fancybox.pack.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="__TMPL__Public/assets/plugins/fancyBox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<!-- Optionally add helpers - button, thumbnail and/or media -->
<script type="text/javascript" src="__TMPL__Public/assets/plugins/fancyBox/source/helpers/jquery.fancybox-buttons.min.js"></script>
<script type="text/javascript" src="__TMPL__Public/assets/plugins/fancyBox/source/helpers/jquery.fancybox-media.min.js"></script>
<script type="text/javascript" src="__TMPL__Public/assets/plugins/fancyBox/source/helpers/jquery.fancybox-thumbs.min.js"></script>

<script type="text/javascript">
(function() {
//	$('#foo').addClass('active');

	/* swiper */
	var mySwiper = new Swiper('.swiper-container', {
		autoplay: 2000,
		speed: 1000,
		loop: true,
		slidesPerView : 4,
		spaceBetween: 15
	});

	/* fancybox for por */
	$('.fancybox-por-item').fancybox({
		closeClick : false,
		nextClick : true,
		arrows : true,
		
		openEffect : 'elastic',			// none, fade, elastic
		closeEffect : 'elastic',
		openSpeed  : 150,
		closeSpeed  : 150,

		prevEffect : 'fade',
		nextEffect : 'fade',
		
		helpers : {
			title : {
				type : 'inside'
			},
			overlay : {
				css : {
					'background' : 'rgba(0,0,0,0.4)'
				}
			},
			thumbs : {
				width  : 50,
				height : 50
			}
		}
	});

	/* fancybox for swp por */
	$('.fancybox-swp-por-item').fancybox({
		closeClick : false,
		nextClick : true,
		arrows : true,
		
		openEffect : 'fade',			// none, fade, elastic
		closeEffect : 'fade',
		openSpeed  : 150,
		closeSpeed  : 150,

		prevEffect : 'fade',
		nextEffect : 'fade',
		
		helpers : {
			title : {
				type : 'inside'
			},
			overlay : {
				css : {
					'background' : 'rgba(0,0,0,0.4)'
				}
			}
		}
	});

	/* imagesLoaded & isotope */
	var isotope_portfolio = $('.portfolio-list').imagesLoaded(function() {
		isotope_portfolio.isotope({
			itemSelector : '.portfolio-item',
			animationOptions : {
				duration : 750,
				easing : 'linear',
				queue : false
			}
		});
	});

	$('.portfolio-filters a').click(function() {
		$(this).parent().parent().find('li').removeClass('active');
		$(this).parent().addClass('active');

		var selector = $(this).attr('data-filter');
		isotope_portfolio.isotope({
			filter : selector
		});
		return false;
	});
})();
</script>

<include file="Public/footer" />
